<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首次登录</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css'  %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css'  %}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css'  %}">
    <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">

    <link rel="stylesheet" href="{% static 'css/login.css'  %}">
    <!-- jQuery -->
    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <!-- Bootstrap -->
    <script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
</head>
<body class="hold-transition register-page" style="border-radius: 10px;">
<div class="register-box" style="width: 450px; min-width: 400px;">
  <div class="card" >
    <div class="card-body register-card-body">
      <p class="login-box-msg" style="font-size: 18px;padding-bottom: 20px;"><b style="color: red;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ user_name }}</b>，请修改默认密码！</p>
         <div class="form-group row">
            <label class="col-sm-3 col-form-label" style="color: #007bff">旧的密码</label>
             <div class="col-sm-9">
                 <input  class="form-control" style="height: 38px;" type="password" name="pwd" id="pwd" value="{{ user.pwd }}">
                 <input  class="form-control" style="height: 38px;" type="hidden" name="username" id="user_name" value="{{ user_name }}">
             </div>
         </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label" style="color:  green">新的密码</label>
            <div class="col-sm-9">
                <input  class="form-control" style="height: 38px;" type="password" id="pw1" name="pw1" onKeyUp="passwordChangeStatuss(this.value);" onBlur="passwordChangeStatuss(this.value);"><span></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label" style="color:  green">密码强度</label>
            <div class="col-sm-9 layui-btn-group pwd-item ">
                <label id="l" class="layui-btn layui-btn-primary" style="width: 33.34%;">低</label>
                <label id="m" class="layui-btn layui-btn-primary " style="width: 33.3%;">中</label>
                <label id="h" class="layui-btn layui-btn-primary" style="width: 33.3%;">高</label>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label" style="color:  green">确认密码</label>
            <div class="col-sm-9 js-pw2">
                <input  class="form-control" style="height: 38px;" type="password" id="pw2" name="pw2"><span></span>
            </div>
        </div>
        <div class="row">
          <div class="col-12">
            <button type="submit" style="height: 38px;" class="btn btn-primary btn-block" id="submit">确定</button>
          </div>
          <!-- /.col -->
        </div>
      </form>
    </div>
    <!-- /.form-box -->
  </div><!-- /.card -->
</div>
{% block custom_js %}
        <script src="{% static 'js/check.js' %}"></script>
<script>
    //ajax提交
    $.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });
    $(document).ready(function () {
        $("#submit").click(function () {
            //验证用户所有输入是否有效，有效则提交后台注册
            msg  = ''
            pw1 = $("#pw1").val()
            pw2 = $("#pw2").val()
            if(checkpasswd(pw1,pw2)){
                //所有输入检查通过，提交数据
                $.ajax({
                    url: '{% url 'login:first_login' %}',
                    type: 'POST',
                    data: {
                        'pwd': $("#pwd").val(),
                        'pw1': $("#pw1").val(),
                        'pw2': $("#pw2").val(),
                        'user_name': $("#user_name").val(),
                    },
                    //请求成功后执行提醒
                    success: function (data) {
                        //弹窗告警
                        layui.use('layer',function () {
                            var layer=layui.layer;
                            if(data.status === 1){
                                layer.alert(data.info,{
                                    icon: 6,
                                    skin: 'layer-ext-moon',
                                    yes: function () {
                                        location.href = "{% url 'login:user_logout' %}";
                                    }
                                })
                            }else {
                                layer.alert(data.info,{
                                    icon: 2,
                                    skin: 'layer-ext-moon',
                                    yes: function () {
                                        location.href = "{% url 'login:user_logout' %}";
                                    }
                                })
                            };
                        })
                    }
                })
            }
        })
    })
</script>
{% endblock %}
</body>
</html>
